<template>

	<div class="content">
		<div style="height:150px; width: 245px;padding:0px;" v-for="item in countData" :key="item.name">
			<el-card body-style="display:flex" style="width: 240px;"  shadow="hover">
				  <i class="icon" :class="'el-icon-'+item.icon" :style="'background:'+item.color"></i>
				  <div class="detail">
					<p class="txth">￥{{item.value}}</p>
					<p class="txt">{{item.name}}</p>
				  </div>
			</el-card>
		</div>

		<div>
			<el-card shadow="hover">
				<echart :chartData="echartData.order" style="width: 80vw; min-width:280px; height: 60vh;"></echart>
			</el-card>
		</div>

		<div style="min-width:300px;">
			<el-card shadow="hover">
				<echart :chartData="echartData.user" style="width: 40vw;min-width:280px; height: 22vh;" />
			</el-card>
		</div>

		<div style="min-width:300px;">
		<el-card shadow="hover">
			<echart :chartData="echartData.video" :isAxisChart="false" style="width: 40vw;min-width:280px; height: 22vh;" />
		</el-card>
		</div>
		
		<div style="width: 80vw;min-width:300px;">
			<el-card style="margin-top: 20px;height: 460px;"  shadow="hover">
				<el-table :data="tableData">
					<el-table-column v-for="(val,key) in tableLabel" :key="key" :prop="key" :label="val">
					</el-table-column>
				</el-table>
			</el-card>
		</div>
		

	</div>


</template>

<script>
import {getData} from '/api/homeapi.js'
import Echart from '/src/components/Echarts.vue'
export default {
	name: 'home',
	components:{
		Echart
	},
	data(){
		return {
			userImg: require('/src/assets/images/user.jpg'),
			tableData: [],
			tableLabel:{
				name:'名称',
				todayBuy:'今日购买',
				monthBuy:'本月购买',
				totalBuy:'总购买'
			},
			countData:[
				{
					name:"今日支付订单",
					value:1234,
					icon:"success",
					color:"#2ec7c9",
				},
				{
					name:"今日收藏订单",
					value:118,
					icon:"star-on",
					color:"#ffb980",
				},
				{
					name:"今日未支付订单",
					value:1234,
					icon:"s-goods",
					color:"#5ab1ef",
				},
				{
					name:"本月支付订单",
					value:118,
					icon:"success",
					color:"#2ec7c9",
				},
				{
					name:"本月收藏订单",
					value:210,
					icon:"star-on",
					color:"#ffb980",
				},
				{
					name:"本月未支付订单",
					value:1234,
					icon:"s-goods",
					color:"#5ab1ef",
				},
			],
			echartData:{
				order:{
					xData:[],
					series:[]
				},
				user:{
					xData:[],
					series:[]
				},
				video:{
					series:[]
				}
			}
		}
	},
	mounted(){
		getData().then(res=>{
			const {code,data} = res.data
			if(code === 20000){
				this.tableData = data.tableData
				const order = data.orderData
				const xData = order.date
				const keyArray = Object.keys(order.data[0])
				const series = []
				keyArray.forEach(key=>{
					series.push({
						name: key,
						data: order.data.map(item => item[key]),
						smooth:true,
						type: 'line'
					})
				})
				//折线图
				// const option = {
				// 	title: {
				// 	  text: '销量对比'
				// 	},
				// 	tooltip: {
				// 		trigger: "axis"
				// 	},
				// 	xAxis: {
				// 		data: xData
				// 	},
				// 	yAxis: {
						
				// 	},
				// 	legend: {
				// 		data: keyArray
				// 	},
				// 	series
				// }
				// const E = echarts.init(this.$refs.echarts)
				// E.setOption(option)
				this.echartData.order.xData=xData
				this.echartData.order.series=series
				// alert(JSON.stringify(this.echartData.order))
				//用户图
				// const userOption = {
				// 	legend:{
				// 		//图例文字颜色
				// 		textStyle:{
				// 			color:'#333',
				// 		},
				// 	},
				// 	grid:{
				// 		left:"20%",
				// 	},
				// 	tooltip: {
				// 		trigger: "axis"
				// 	},
				// 	xAxis:{
				// 		type:'category',  //类目轴
				// 		data: data.userData.map(item=>item.date),
				// 		axisLine:{
				// 			lineStyle:{
				// 				color:"#17b3a3",
				// 			},
				// 		},
				// 		axisLabel:{
				// 			interval:0,
				// 			color:"#333",
				// 		},
				// 	},
				// 	yAxis:[
				// 		{
				// 			type:'value', //类目轴
				// 			axisLine:{
				// 				lineStyle:{
				// 					color:"#17ba3a",
				// 				},
				// 			},
				// 		},
				// 	],
				// 	color:["#2ec7c9","#b6a2de"],
				// 	series:[
				// 		{
				// 			name: '新增用户',
				// 			data: data.userData.map(item => item.new),
				// 			type: 'bar'
				// 		},
				// 		{
				// 			name: '活跃用户',
				// 			data: data.userData.map(item => item.active),
				// 			type: 'bar'
				// 		}
				// 	],
				// }

				// const U = echarts.init(this.$refs.userEcharts)
				// U.setOption(userOption)
				
				this.echartData.user.xData=data.userData.map(item=>item.date)
				this.echartData.user.series=[
						{
							name: '社区',
							data: data.userData.map(item => item.new),
							type: 'bar'
						},
						{
							name: '拼多多',
							data: data.userData.map(item => item.active),
							type: 'bar'
						}
					]
				
				//饼图
				// const videoOption = {
				// 	tooltip:{
				// 		trigger:"item",
				// 	},
				// 	color:[
				// 		"#0f78f4",
				// 		"#dd536b",
				// 		"#9462e5",
				// 		"#a6a6a6",
				// 		"#e1bb22",
				// 		"#39c362",
				// 		"#3ed1cf",
				// 	],
				// 	series: [
				// 		{
				// 			data:data.videoData,
				// 			type:'pie'
				// 		}
				// 	]
				// }
				// const V = echarts.init(this.$refs.videoEcharts)
				// V.setOption(videoOption)
				
				this.echartData.video.series=[
						{
							data:data.videoData,
							type:'pie'
						}
				]
			}
			// console.log(res)
		})
	}
}
</script>
<style>
.content{
	display: flex;
	justify-content: space-around;
	align-items: center;
	flex-wrap: wrap;
}
.user{
	width: 100px;
	font-size: 10px;
	text-align: left;
/* 	display: flex;
	justify-content: left;
	align-items: center;
	padding: 30px;
	border-bottom: 1px solid #ababab; */
}
.userinfo{
	/* margin-left: 20px; */
	.name{
		font-size: 18px;
		font-weight: bold;
	}
	.access{
		font-size: 10px;
	}
}
.userImg{
	width:60px;
	height: 60px;
	/* border-radius: 50%; */
}
.login-info{
	font-size: 10px;
	width: 200px;
/* 	font-family: '宋体';
	span{
		margin-left: 50px;
	} */
}
.num{
	display: flex;
}
.icon{
	width: 70px;
	height: 70px;
	background-color: #5ab1ef;
	display: flex;
	justify-content:center;
	align-items: center;
	font-size: 28px;
	color: white;
}
.detail{
	height: 70px;
	margin-left: 10px;
}
.txt{
	font-size: 10px;
}
.txth{
	font-size: 14px;
	font-weight: bold;
}
.graph{
	margin-top: 10px;
	width: 100%;
	display: flex;
	justify-content:space-between;
}
echart{

}
</style>